<!-- 分页 -->
{% if page_obj.has_other_pages %}
<nav aria-label="页面导航" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">
                    <i class="fas fa-chevron-left me-1"></i>上一页
                </a>
            </li>
        {% endif %}
        
        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">{{ num }}</a>
                </li>
            {% endif %}
        {% endfor %}
        
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">
                    下一页<i class="fas fa-chevron-right ms-1"></i>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

<!-- 确认删除模态框 -->
<div class="modal fade confirm-modal" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>确认删除
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fas fa-trash-alt fa-3x text-danger mb-3"></i>
                    <h6>您确定要删除资产 "<span id="assetNameToDelete"></span>" 吗？</h6>
                    <p class="text-muted">此操作无法撤销，请谨慎操作。</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>取消
                </button>
                <a href="#" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-2"></i>确认删除
                </a>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
// 视图切换功能
function switchView(viewType) {
    const tableView = document.getElementById('tableView');
    const cardView = document.getElementById('cardView');
    const tableBtn = document.getElementById('tableViewBtn');
    const cardBtn = document.getElementById('cardViewBtn');
    
    if (viewType === 'table') {
        tableView.classList.remove('d-none');
        cardView.classList.add('d-none');
        tableBtn.classList.add('active');
        cardBtn.classList.remove('active');
        localStorage.setItem('assetViewMode', 'table');
    } else {
        tableView.classList.add('d-none');
        cardView.classList.remove('d-none');
        tableBtn.classList.remove('active');
        cardBtn.classList.add('active');
        localStorage.setItem('assetViewMode', 'card');
    }
}

// 确认删除功能
function confirmDelete(assetName, deleteUrl) {
    document.getElementById('assetNameToDelete').textContent = assetName;
    document.getElementById('confirmDeleteBtn').href = deleteUrl;
    new bootstrap.Modal(document.getElementById('confirmDeleteModal')).show();
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 恢复用户的视图偏好
    const savedViewMode = localStorage.getItem('assetViewMode');
    if (savedViewMode) {
        switchView(savedViewMode);
    }
    
    // 恢复排序选择
    const urlParams = new URLSearchParams(window.location.search);
    const sortValue = urlParams.get('sort');
    if (sortValue) {
        document.getElementById('sortSelect').value = sortValue;
    }
    
    // 排序选择变化时自动提交表单
    document.getElementById('sortSelect').addEventListener('change', function() {
        document.getElementById('searchForm').submit();
    });
    
    // 筛选器变化时自动提交表单
    document.getElementById('categoryFilter').addEventListener('change', function() {
        document.getElementById('searchForm').submit();
    });
    
    document.getElementById('statusFilter').addEventListener('change', function() {
        document.getElementById('searchForm').submit();
    });
    
    // 搜索输入框回车提交
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            document.getElementById('searchForm').submit();
        }
    });
    
    // 表单提交时显示加载动画
    document.getElementById('searchForm').addEventListener('submit', function() {
        showLoading();
    });
    
    // 添加页面加载动画
    setTimeout(function() {
        document.querySelectorAll('.asset-card, .table-modern').forEach(function(element) {
            element.classList.add('fade-in');
        });
    }, 100);
});

// 显示加载动画
function showLoading() {
    document.getElementById('loadingSpinner').style.display = 'block';
    document.getElementById('tableView').style.opacity = '0.5';
    document.getElementById('cardView').style.opacity = '0.5';
}

// 隐藏加载动画
function hideLoading() {
    document.getElementById('loadingSpinner').style.display = 'none';
    document.getElementById('tableView').style.opacity = '1';
    document.getElementById('cardView').style.opacity = '1';
}

// 批量操作功能（预留）
function selectAllAssets() {
    const checkboxes = document.querySelectorAll('input[name="selected_assets"]');
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    updateBatchActions();
}

function updateBatchActions() {
    const selectedAssets = document.querySelectorAll('input[name="selected_assets"]:checked');
    const batchActionsDiv = document.getElementById('batchActions');
    
    if (selectedAssets.length > 0) {
        batchActionsDiv.classList.remove('d-none');
        document.getElementById('selectedCount').textContent = selectedAssets.length;
    } else {
        batchActionsDiv.classList.add('d-none');
    }
}

// 响应式表格处理
function handleResponsiveTable() {
    const table = document.querySelector('.table-modern table');
    if (table && window.innerWidth < 768) {
        table.classList.add('table-responsive');
    }
}

// 窗口大小变化时处理响应式
window.addEventListener('resize', handleResponsiveTable);

// 初始化响应式表格
handleResponsiveTable();

// 工具提示初始化
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
    // Ctrl + N 新增资产
    if (e.ctrlKey && e.key === 'n') {
        e.preventDefault();
        window.location.href = "{% url 'assets:asset_create' %}";
    }
    
    // Ctrl + F 聚焦搜索框
    if (e.ctrlKey && e.key === 'f') {
        e.preventDefault();
        document.getElementById('searchInput').focus();
    }
    
    // Ctrl + 1 切换到表格视图
    if (e.ctrlKey && e.key === '1') {
        e.preventDefault();
        switchView('table');
    }
    
    // Ctrl + 2 切换到卡片视图
    if (e.ctrlKey && e.key === '2') {
        e.preventDefault();
        switchView('card');
    }
});

// 页面性能优化：图片懒加载
document.addEventListener('DOMContentLoaded', function() {
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.classList.remove('lazy');
                    imageObserver.unobserve(img);
                }
            });
        });
        
        document.querySelectorAll('img[data-src]').forEach(img => {
            imageObserver.observe(img);
        });
    }
});
</script>
{% endblock %}
